<!-- 播放页头部-->
<template>
  <div>
    <div
      class="flex-wrap section"
      :class="{
        'section-active':
          selectInfo.course_section_id === course_section_id ||
          selectInfo.course_section_id === section.live_id
      }"
      @click.stop="chooseSection"
      :id="'video_' + section.video_id"
    >
      <div class="section-status-box">
        <zl-icon
          v-if="
            section.video_detail &&
              section.video_detail.is_lock &&
              +courseInfo.is_purchased === 0
          "
          icon="icon-suo"
          :icon-style="iconStyle"
        ></zl-icon>
        <img
          class="current-play-icon"
          v-else-if="selectInfo.course_section_id === course_section_id"
          src="//image.zlketang.com/public/news/images/new_official/play/play_icon.gif"
          alt=""
        />
      </div>
      <div class="flex1 ">
        <!-- 录播或者更新提醒 -->
        <template v-if="+section.item_type === 1 || section.is_placeholder > 0">
          <div>
            <div class="section-name word-break-break-all">
              {{ section.item_name }}
            </div>
            <!-- 课节更新提醒 -->
            <template v-if="section.is_placeholder > 0">
              <div class="flex-center-wrap play-time">
                <div class="section-update-label section-update-label-1">
                  {{ +section.is_placeholder === 1 ? '待更新' : '更新中' }}
                </div>
                <div class="ml6 flex1 f12 text-ess-1">
                  {{ section.placeholder_text }}
                </div>
              </div>
            </template>
            <template v-else>
              <!-- 正在播放的 -->
              <div
                class="play-time flex-center-wrap"
                v-if="selectInfo.course_section_id === course_section_id"
              >
                <zl-icon icon="icon-lubo" :icon-style="iconStyle"></zl-icon>
                <span style="margin-right: 6px">录播</span>
                <span class="total-time">{{ currentTime | filterTime }}</span>
                <span class="split-line">/</span>
                <span class="total-time">{{ section.durationTime }}</span>
              </div>
              <!-- 未播放的 -->
              <div class="play-time flex-center-wrap" v-else>
                <div class="flex-center-wrap">
                  <zl-icon icon="icon-lubo" :icon-style="iconStyle"></zl-icon>
                  <span style="margin-right: 6px">录播</span>
                  <span class="split-line">|</span>
                  <span class="total-time" style="margin-left: 6px">
                    {{ section.durationTime }}
                  </span>
                </div>
                <div class="ml20">
                  学习至：{{
                    courseVideoProgress[section.video_id]
                      | filterStudyProgress(section)
                  }}
                </div>
              </div>
            </template>
          </div>
        </template>
        <!-- 直播 -->
        <template v-if="+section.item_type === 2">
          <div class="flex-wrap flex-justfy-between">
            <div class="section-name word-break-break-all flex1 mr10">
              {{ section.item_name }}
            </div>
            <span
              class="live-tips live-prev"
              v-if="setLiveStatus(section.live_detail) === 1"
            >
              未开始
            </span>
            <span
              class="live-tips live-living"
              v-else-if="setLiveStatus(section.live_detail) === 2"
            >
              直播中
            </span>
            <span class="live-tips live-end" v-else>已结束</span>
          </div>
          <div>
            <div class="play-time flex-center-wrap">
              <zl-icon icon="icon-lubo" :icon-style="iconStyle"></zl-icon>
              <span style="margin-right: 6px">直播</span>
              <span
                class="total-time"
                :class="{ 'total-time-active': isReady }"
              >
                {{ section.live_detail | filterLiveStartTime(this) }}
              </span>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div
      class="section-site-box"
      v-if="
        (selectInfo.course_section_id === course_section_id ||
          selectInfo.course_section_id === section.live_id) &&
          isArrAndLen(siteList) &&
          !(
            section.video_detail &&
            section.video_detail.is_lock &&
            +courseInfo.is_purchased === 0
          )
      "
    >
      <div
        :class="[
          'flex-center-wrap',
          'section-site-item',
          currentSite.exam_site_id === item.exam_site_id &&
          currentSite.second === item.second
            ? 'section-site-item-active'
            : ''
        ]"
        v-for="(item, index) in siteList"
        :key="index"
        @click="chooseSite(item)"
      >
        <i class="section-site-icon iconfont icon-zhibohuifang"></i>
        <div class="flex1 text-ess-1">{{ item.exam_site_desc }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import zlIcon from '@/components/zlIcon.vue'
import entryStore from '@/store/entry_store'
export default {
  props: {
    section: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    'zl-icon': zlIcon
  },
  data() {
    return {
      iconStyle: {
        width: '14px',
        height: '14px',
        marginRight: '4px'
      },
      isReady: false
    }
  },
  computed: {
    // 播放中的课节
    playingSection() {
      return this.$store.state.play.playingSection || {}
    },
    //当前正在播放的知识点
    currentSite() {
      return this.$store.state.play.currentSite || {}
    },
    //播放中的课节考点数据
    siteList() {
      let { points_exam_site = [] } = this.playingSection
      return points_exam_site
    },
    course_section_id() {
      return this.section ? this.section.item_id : ''
    },
    courseMkInfo() {
      //目录信息
      return this.$store.state.play.courseMkInfo
    },
    currentTime() {
      //正在播放的时间
      return this.$store.state.play.currentTime
    },
    // 课程进度
    courseVideoProgress() {
      return this.$store.state.play.courseVideoProgress.reduce((sum, item) => {
        sum[item.vid] = item.s
        return sum
      }, {})
    },
    // 用户选择
    selectInfo() {
      return this.$store.state.play.selectInfo
    },
    isLogin() {
      return this.$store.state.user.isLogin
    },
    courseInfo() {
      return this.$store.state.play.courseInfo
    }
  },
  filters: {
    filterTime(val) {
      let minutes = Math.floor(val / 60)
      let seconds = val % 60
      minutes = minutes > 9 ? minutes : '0' + minutes
      seconds = seconds > 9 ? seconds : '0' + seconds
      return `${minutes}:${seconds}`
    },
    filterStudyProgress(s = 0, section) {
      return Math.floor((s / section.duration) * 100) + '%'
    },
    filterLiveStartTime(live_detail, obj) {
      // 3天内展示直播倒计时
      let cutDownTime = 3 * 24 * 60 * 60 * 1000
      let startTime = new Date(live_detail.begin_time).valueOf()
      let currentTime = Date.now()
      let time = startTime - currentTime

      if (time <= cutDownTime && time > 0) {
        // 展示倒计时
        time = Math.floor(time / 1000)
        let daySecond = 86400
        let hourSecond = 3600
        let minSecond = 60
        let day = Math.floor(time / daySecond)
        let hour = Math.floor((time % daySecond) / hourSecond)
        let min = Math.floor((time % hourSecond) / minSecond)
        obj.isReady = true
        return day > 0
          ? `${day}天${hour}小时${min}分后开始`
          : hour > 0
          ? `${hour}小时${min}分后开始`
          : `${min}分后开始`
      }
      return live_detail.begin_time.replace('-', '.').slice(0, -3)
    }
  },
  methods: {
    //选择考点
    chooseSite(item) {
      this.$bus.$emit('set-play-time', +item.second)
    },
    // 直播任务状态
    setLiveStatus(liveItem = {}) {
      let dateNow = Date.now()
      // 具体时间
      let timeNowStr = this.dateFormat('Y-m-d H:i:s', dateNow)
      // 直播中
      if (timeNowStr > liveItem.begin_time && timeNowStr < liveItem.end_time)
        return 2
      // 预约
      else if (timeNowStr < liveItem.begin_time) return 1
      // 回访
      else if (timeNowStr > liveItem.end_time) return 3
    },
    goToNewUserActivity() {
      storage.set('isGiftClick', 1)
      this.$store.commit('user/setIsShowGift', true)
    },
    // 选中播放
    chooseSection() {
      window.videoRuntime ? (window.videoRuntime.lineIndex = 0) : ''
      if (
        this.section.video_detail &&
        this.section.video_detail.is_lock &&
        +this.courseInfo.is_purchased === 0
      ) {
        if (this.isLogin) {
          this.$confirm('课程暂未激活。', '提示', {
            confirmButtonText: '去激活',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
            customClass: 'custom-confirm-box',
            closeOnClickModal: false
          })
            .then(() => {
              this.goToNewUserActivity()
            })
            .catch(err => {})
        } else {
          this.showLoginDialog()
        }
        return
      }
      let {
        item_type,
        item_id,
        item_name,
        live_id,
        is_placeholder
      } = this.section
      if (+is_placeholder > 0) {
        let tipMap = {
          '1': '课节即将更新，请耐心等待',
          '2': '课节正在更新中，请耐心等待'
        }
        return this.$message.warning(tipMap[is_placeholder])
      }
      if (this.course_section_id === this.selectInfo.course_section_id) return
      // 切换视频时，上报进度
      try {
        // let parentCom = this.$parent.$parent
        // let { playNowTime } = parentCom
        // if (/^[0-9.]+$/.test(playNowTime)) {
        //   playNowTime = +playNowTime
        //   parentCom.setVideoProgress(playNowTime)
        // }
        this.$bus.$emit('set-video-progress', 1)
      } catch (e) {}
      this.$store.commit('play/setCurrentTime', 0)

      // 获取对应课节的详细信息
      let {
        courseMkInfo: { course_id }
      } = this
      if (!item_id) {
        this.$message({
          type: 'warning',
          message: '课程配置无效，请联系客服！'
        })
        return
      }
      this.$store.dispatch('play/setSelectInfo', {
        ...this.selectInfo,
        course_section_id: item_id,
        course_section_name: item_name,
        course_id
      })
      this.$store.commit('play/setVideoImgType', 0)
      if (+item_type === 2) {
        //如果是直播
        // 展示直播封面，并跳转
        this.$store.commit('play/SET_PLAYING_SECTION', {})
        this.$store.commit('play/setVideoImgType', 1)
        this.goTo('/vcourse/live.html', {
          query: { live_id, course_section_id: item_id, course_id },
          target: '_blank'
        })
        return
      }
      // 切换课节时清空笔记
      this.$store.dispatch('play/setNoteList', [])
      // 获取看课进度
      this.$store.dispatch('play/setCurVideoProgress', {
        video_id: this.section.video_id
      })
      this.$store.dispatch('play/getPlayingSection', {
        course_section_id: item_id,
        course_id
      })
    }
  },
  beforeMount() {
    entryStore.loadModule(this.$store, ['user'])
  },
  mounted() {
    this.$bus.$on('goToPreSection', val => {
      if (+val.videoID === +this.section.video_id) {
        this.chooseSection()
      }
    })
  }
}
</script>
<style scoped>
.section {
  padding: 10px 20px;
  cursor: pointer;
  color: #737373;
}
.section-active {
  color: #8c8c8c;
  background-color: #1a1a1a;
}
.section-active .section-name {
  color: #ff9240 !important;
}

.section-site-box {
  padding: 0 20px;
  background: #1a1a1a;
}

.section-site-item {
  padding-bottom: 10px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}

.section-site-item-active {
  color: #ff8d38;
}

.section-site-icon {
  margin-right: 6px;
  font-size: 12px;
  height: 12px;
  width: 12px;
}

.play-time {
  margin-top: 6px;
  font-size: 12px;
}
.section-status-box {
  margin-right: 4px;
  width: 16px;
  height: 16px;
}
.current-play-icon {
  width: 100%;
}
.section-name {
  font-size: 14px;
  font-weight: 400;
  color: #e6e6e6;
  line-height: 20px;
}
.word-break-break-all {
  word-break: break-all;
}
.live-tips {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 400;
  height: 19px;
  line-height: 19px;
  border-radius: 4px;
}
.live-prev {
  color: #80b2f3;
  background: #292c33;
}
.live-living {
  color: #ff654d;
  background: #332a29;
}
.live-end {
  color: #80b2f3;
  background: #292c33;
}
.total-time-active {
  color: #e6e6e6;
}
.section-update-label {
  width: 48px;
  height: 19px;
  line-height: 19px;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  border-radius: 11px;
}
.section-update-label-1 {
  color: #b3b3b3;
  border: 1px solid #333333;
}
.mr10 {
  margin-right: 10px;
}
</style>
